// 调用令牌校验函数
checkToken()

// 调用用户名渲染函数
decUser()

// 调用退出函数
quit()

// 看板顶部数据渲染函数
function decOverview(overview){
        const keys = Object.keys(overview)
            keys.forEach(ele => {
            document.querySelector(`.${ele}`).innerHTML = overview[ele]
        })
}


//薪资走势 图表渲染函数
function decSalary(year){
    // 初始化echarts 实例
    const myEcharts = echarts.init(document.querySelector('#line'))

    // 指定图表的配置项和数据
    const option =  {
      // 标题组件
        title:{
          text:'薪资走势图表',
          top:'3%',
          left:'1%'
        },
      //绘图网格
        grid:{
          top:'20%'
        } ,
      // 直角坐标系 grid绘图网格 中的 x 轴
        xAxis: {
          // 坐标轴类型 类目轴   可以自动可通过 xAxis.data 设置类目数据
          type: 'category',
          // 类目数据，在类目轴中有效
          data:year.map(ele=>ele.month) ,
          // 坐标轴线样式
          axisLine:{
            lineStyle:{
              type:'dashed',
              color:'#ccc'
            }
          }
        },
      // 直角坐标系 grid绘图网格 中的 y 轴
        yAxis: {
          // 数值轴 适用于连续数据
          type: 'value',
          // 分隔线样式
          splitLine:{
            lineStyle:{
              type:'dashed',
              color:'#ccc'
            }
          },

        },
      // 图表数据系列
        series: [
          // 当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示
          {
            // 类目数据  与 xAxis.data 一一对应
            data: year.map(ele=>ele.salary),
            // 折线图
            type: 'line',
            // 是否平滑曲线显示
            smooth: true,
            // 标记图形大小
            symbolSize:8,
            // 线样式
            lineStyle:{
              width:'3',
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#479dee' // 0% 处的颜色
                }, {
                    offset: 1, color: '#5c75f0' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            // 区域填充样式  显示成区域面积图
            areaStyle: {
              color:{
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，
                // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#b2d7f7' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },

          }
        ],
      // 提示框组件
        tooltip:{
          // 是否显示提示框组件
          show:'true',
          // 触发类型  坐标轴触发
          trigger:'axis'
        }
      }

    // 使用指定的配置项和数据显示图表
    myEcharts.setOption(option)
} 


// 薪资分布饼状图函数
function decsalaryData(salaryData){
  // 初始化echarts 实例
  const myCharts  = echarts.init( document.querySelector('#salary'))

  // 指定图表的配置项和数据
  const option = {
    title:{
      text:'薪资分布饼状图',
      top:'3%',
      left:'3%'
    },
    // 提示框组件
    tooltip: {
      // 触发类型  数据项图形触发
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        // 系列名称，用于提示框tooltip的显示，legend 的图例筛选
        name: '薪资分布饼状图',
        type: 'pie',
        // 饼图的半径  数组的第一项是内半径，第二项是外半径
        radius: ['55%', '70%'],
        // 是否启用防止标签重叠策略   在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
        avoidLabelOverlap: false,
        // 图形样式
        itemStyle: {
          // 用于指定饼图扇形区块的内外圆角半径
          borderRadius: 10,
          // 图形的描边颜色
          borderColor: '#fff',
          // 描边线宽
          borderWidth: 2
        },
        // 饼图图形上的文本标签，可用于说明图形的一些数据信息
        label: {
          show: false,
          position: 'center'
        },
        // 高亮状态的扇区和标签样式
        emphasis: {
          // 文本样式
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        // 标签的视觉引导线配置
        labelLine: {
          show: false
        },
        // 系列中的数据内容数组
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
        data: salaryData.map(ele=>{
          return {value:ele.g_count+ele.b_count,name:ele.label}
        })
      }
    ],
    // 调色盘颜色列表
    // 如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色
    color:['#fda224','#5097ff','#3abcfa','#34d39a']
  }

  // 使用指定的配置项和数据绘制图表
  myCharts.setOption(option)
}


// 薪资分布柱状图函数
function decGround(groupData){

  // 创建实例
  const myCharts = echarts.init(document.querySelector('#lines'))

  // 指定图表的配置项和数据

  const option = {
    // 绘图网格
    grid:{
      top:'15%',
      left:'6%'
    },
    xAxis: {
      type: 'category',
      // 默认渲染第一组数据
      data: groupData[1].map(ele=>ele.name),
      // 线的类型  颜色
      axisLine:{
        lineStyle:{
          color:'#ccc',
          type:'dashed'
        }
      },
      // 坐标刻度标签相关设置
      axisLable:{
        // color  刻度标签文字颜色
        color:'#999'

      }
    },
    yAxis: {
      type: 'value'
    },
    // 提示框
    tooltip:{

    },
    series: [
      {
        // 系列名称 用于提示框tooltip的显示
        name:'期望薪资',
        data: groupData[1].map(ele=>ele.hope_salary),
        // 系列图形 柱状图
        type: 'bar',
        // 图形样式
        itemStyle:{
           // 柱条 颜色 线性渐变
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#34D39a' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }

      },
        {
        name:'实际薪资',
        data: groupData[1].map(ele=>ele.salary),
        type: 'bar',
        itemStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }

  // 使用指定的配置项和数据绘制图表
  myCharts.setOption(option)

  // 高亮切换  数据切换 渲染
   document.querySelector('#btns').addEventListener('click',(e)=>{
    if(e.target.classList.contains('btn')){
      // console.log(e.target.innerText)
      // 点击页码切换高亮
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')

      // 切换数据
      const num = e.target.innerText
      option.xAxis.data = groupData[num].map(ele=>ele.name)
      option.series[0].data = groupData[num].map(ele=>ele.hope_salary)
      option.series[1].data = groupData[num].map(ele=>ele.salary)


      // 修改配置项后 重新绘制图表
      myCharts.setOption(option)
    }
   })

}


// 男女薪资分布函数
function decSAData(salaryData){

  // 创建echarts 示例
  const myCharts  = echarts.init(document.querySelector('#gender'))

  // 指定图表的配置项和 数据
  const option = {
    title:[
      {
        text:'男女薪资分布',
        top:'5%',
        left:'5%',
        // 主标题文字
        textStyle:{
          // 主标题文字字体大小
          fontSize:18
        }
      },{
        text: '男生',
        left: '50%',
        top: '48%',
        // 整体（包括 text 和 subtext）的水平对齐
        textStyle:{
          fontSize:15
        },
        textAlign: 'center'
      },
      {
        text: '女生',
        left: '50%',
        bottom: '5%',
        textStyle:{
          fontSize:15
        },
        textAlign: 'center'
      }
    ],
    tooltip: {
      // 提示框组件 触发类型  数据项图形触发 
      trigger: 'item'
    },
    // 图例组件
    // legend: {
    //   top: '5%',
    //   left: 'center'
    // },
    // 图表数据系列
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        // 饼图的半径 数组的第一项是内半径，第二项是外半径
        radius: ['20%', '30%'],
        // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
        center:['50%','30%'],
        // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
        // avoidLabelOverlap: false,
        // 饼图图形上的文本标签
        // label: {
        //   show: false,
        //   position: 'center'
        // },
        // 高亮状态的扇区和标签样式
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        // 标签的视觉引导线配置
        labelLine: {
          show: true
        },
        data:salaryData.map(ele=>{
          return {value:ele.b_count ,name: ele.label}
        }),
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' }
        // ],
        // 系列调色盘颜色列表
        color:['#fda224','#5097ff','#3abcfa','#34d39a']
      },
          {
        // name: 'Access From',
        type: 'pie',
        radius: ['20%', '30%'],
        center:['50%','73%'],
        // avoidLabelOverlap: false,
        // label: {
        //   show: false,
        //   position: 'center'
        // },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: true
        },
        data:salaryData.map(ele=>{
          return {value:ele.g_count , name:ele.label}
        })
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' }
        // ]
      }
    ]
  }

  // 使用指定的配置项和数据 绘制图表

  myCharts.setOption(option)
}


// 籍贯分布函数
function decProvince(provinceData){
    const dom = document.querySelector('#map')
    const myEchart = echarts.init(dom)
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    dataList.forEach(ele=>{
      const res = provinceData.find(v=>{
        return  v.name.includes(ele.name)
      })
      // console.log(res)
      if(res !== undefined){
        ele.value = res.value
      }
    })
    // console.log(dataList)
    const option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option) 
}


// 调用统计函数
// 首页 获取学生统计数据函数
async function decData() {
    // try { 
        // const token  = localStorage.getItem('token')
        const data =  await axios({
          url: '/dashboard',

        //   请求头携带 token
        //   headers: {
        //     Authorization:token
        //   }
        })
        // console.log(data.data)

        // 解构服务器响应成功后返回的数据
        const {overview,groupData,provinceData,salaryData,year} = data.data

        // 调用看板顶部渲染函数  传递实参overview
        decOverview(overview)

        // const keys = Object.keys(overview)
        //     keys.forEach(ele => {
        //     document.querySelector(`.${ele}`).innerHTML = overview[ele]
        // })
        
        // 调用薪资走势 图表渲染函数
        decSalary(year)

        // 调用薪资饼状图函数
        decsalaryData(salaryData)
        

        // 调用薪资分布柱状图
        decGround(groupData)

        // 调用男女薪资分布函数
        decSAData(salaryData)

        // 调用籍贯分布函数
        decProvince(provinceData)


    // } catch (error) {

    //     // 登录状态失效 就是token 过期 或者 被篡改(状态是 401)  ，删除本地缓存   提示用户重新登录
    //     // console.dir(error)
    //     if (error.response.status === 401) {
    //         localStorage.removeItem('username')
    //         localStorage.removeItem('token')
    //         showToast('请重新登录')
    //         setTimeout(() => {
    //             location.href = '../login.html'
    //         },1500)
    //     }
    // }
}
decData()